<!-- 页面：例如 pages/index/index.vue -->
<template>
  <page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
  <view v-if="myRole == 'doctor'" class="parent-container">
    <view class="list">
      <view class="list-item" v-for="item in list" :key="item.id" @click="navigationUrl(item)">
        <!-- 左侧：图标 + 主标题 -->
        <view class="item-left">
          <text class="iconfont" :class="item.icon"></text>
        </view>

        <!-- 中间：主标题 + 详情 -->
        <view class="item-content">
          <text class="item-title text13">{{ item.title }}</text>
        </view>


        <!-- 右侧箭头 -->
        <wd-icon custom-class="item-arrow" name="arrow-right" size="19px"></wd-icon>
      </view>
    </view>
  </view>

  <view class="page-container" v-if="myRole == 'default'">
    <!-- 功能网格布局 -->
    <gridMenu :gridItems="gridItems" count="4" ptop="70rpx" mbottom="50rpx" gap="0px" />
    <view class="my-server">
      <newsList :newsList="healthItems" title="健康咨询" routerName="health_newsDetail" />
    </view>
  </view>

  <TabComponent :tabs="currentTabs" @change="onTabChange" />
</template>

<script setup>
import {
  health_consultation_itemsApi
} from "@/api/health"

import newsList from '@/components/news-list/index.vue'
import gridMenu from "@/components/grid-menu/index"


import {
  ref,
  onMounted,
  computed,
  nextTick
} from 'vue';
import {
  useRouter
} from 'uni-mini-router'

import {
  useFontSizeStore
} from '@/stores/fontSizeStore';

import {
  useTabStore
} from '@/stores/tabs'


import {
  ROLE_TABS
} from "@/config/roles"
import TabComponent from '@/components/tab-bar/index.vue'
import { onLoad, onShow } from '@dcloudio/uni-app';
import { defualt_grid_items } from "@/utils/enmuText"


import { useShare } from '@/utils/useShare';
import { getAppEnum } from "@/utils/appDataEnum"


// 配置分享内容
const { onShareAppMessage, onShareTimeline } = useShare({
  title: '欢迎',
  path: 'pages/tabPage/doctor/doctor_home', // 当前页面路径
  imageUrl: '/static/share-cover.jpg',
  query: '' // 朋友圈参数（可选）
});


const fontSizeStore = useFontSizeStore();
const router = useRouter();
const myRole = ref("");
// ✅ 计算当前角色的 tabs
const currentTabs = computed(() => {
  const role = myRole.value || ""
  if (role == "" || role == undefined || role == null) {
    getApp()[getAppEnum.CurrentRole] = 'default'
  }
  const tabItems = ROLE_TABS[role]?.tabs || ROLE_TABS['default']?.tabs
  return tabItems

})

// ✅ Tab 点击处理
const onTabChange = (tab) => {
  nextTick(() => {
    router.pushTab({
      name: tab.key
    })
  })
}

// 列表数据
const list = ref([])



// 健康咨询数据（仅保留内容字段）
const healthItems = ref([]);



const listItems = JSON.parse(JSON.stringify(defualt_grid_items))
const gridItems = ref([
  ...listItems.splice(0, 7),
  {
    iconClass: 'record-icon',
    iconName: 'icon-Rightyou',
    text: '更多',
    pathName: "grid_menu_more"
  }
]);


const navigationUrl = (item) => {
  router.push(item)
}


// 模拟数据（新增 desc 字段）
onMounted(() => {
  const userRole = getApp()[getAppEnum.CurrentRole]
  myRole.value = userRole || ""
  console.log("userRole33:", myRole.value)
  list.value = [
    {
      id: 1,
      icon: 'icon-dingdan',
      title: '今日预约情况',
      name: "doctor_todayStatus"
    },
    {
      id: 2,
      icon: 'icon-yaodian',
      title: '绑定者健康情况',
      name: "doctor_healthStatus"
    },
    {
      id: 3,
      icon: 'icon-jiankang',
      title: '咨询情况',
      name: "doctor_customerStatusDetail"
    },
  ];

  health_consultation_itemsApi().then((res) => {
    console.log("res:", res.data)
    if (res.code == 200) {
      healthItems.value = [...res.data];
    }
  })

})


</script>

<style scoped lang="less">
@import '@/static/styles/colors.less';
@import '@/static/styles/constants.less';
@import '@/static/styles/volunteer/home/index.less';

@icon-color: #007aff; // 图标主题色
@text-color: #333; // 文字颜色
@item-height: 140rpx; // 增加高度以容纳详情
@border-color: #e5e5e5;



.list {
  padding: 0 30rpx;
}

.list-item {
  display: flex;
  align-items: center;
  height: @item-height;
  border-radius: @layout-border-radius-sm;
  padding: 0rpx 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  // border: 1rpx solid @color-border-dark;
  position: relative;

  &:active {
    transform: scale(0.98);
    opacity: 0.8;
  }

  .item-left {
    width: 60rpx;
    text-align: center;
    margin-right: 24rpx;

    .iconfont {
      font-size: @h1-size;
      color: @icon-color;
    }
  }

  .item-content {
    flex: 1;
    overflow: hidden;
  }

  .item-title {
    // font-size: @h5-size;
    color: @color-text-dark;
    font-weight: 500;
    line-height: 1.4;
    display: block;
  }

  .item-desc {
    font-size: @h6-size;
    color: @color-text-secondary;
    line-height: 1.4;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4rpx;
  }

  .item-arrow {
    // font-size: 36rpx;
    color: @color-text-placeholder;
    margin-left: auto;
    transform: rotate(0deg);
    transition: transform 0.3s;
  }
}
</style>